<template>
  <div class="proposal-page">
    <!-- 背景粒子 -->
    <div id="particles-js-proposal" class="particles"></div>
    
    <!-- 返回按钮 -->
    <router-link to="/" class="back-btn">
      <span>← 返回</span>
    </router-link>
    
    <!-- 主要内容 -->
    <div class="proposal-content" :class="{ 'accepted': isAccepted }">
      <div class="proposal-header" data-aos="fade-down" data-aos-duration="2000">
        <h1 class="proposal-title">💍 重要时刻</h1>
        <p class="proposal-subtitle">这一刻，我想和你分享我内心最深的愿望</p>
      </div>
      
      <!-- 戒指展示 -->
      <div class="ring-section" data-aos="zoom-in" data-aos-delay="500">
        <div class="ring-container" @click="showRing">
          <div class="ring" :class="{ 'ring-spin': isRingSpinning }">
            <div class="diamond">💎</div>
            <div class="ring-band">💍</div>
          </div>
          <div class="ring-glow"></div>
        </div>
        <p class="ring-text">点击戒指查看详情</p>
      </div>
      
      <!-- 求婚文字 -->
      <div class="proposal-text" data-aos="fade-up" data-aos-delay="1000">
        <div class="proposal-message" ref="proposalMessage"></div>
      </div>
      
      <!-- 未来规划 -->
      <div class="future-plans" data-aos="fade-up" data-aos-delay="1500">
        <h2 class="plans-title">🌟 我们的未来</h2>
        <div class="plans-grid">
          <div 
            v-for="(plan, index) in futurePlans" 
            :key="index"
            class="plan-card"
            :data-aos="'flip-up'"
            :data-aos-delay="2000 + index * 200"
          >
            <div class="plan-icon">{{ plan.icon }}</div>
            <h3 class="plan-title">{{ plan.title }}</h3>
            <p class="plan-description">{{ plan.description }}</p>
          </div>
        </div>
      </div>
      
      <!-- 求婚按钮 -->
      <div class="proposal-actions" data-aos="fade-up" data-aos-delay="2500">
        <div class="proposal-question">
          <h2 class="question-text">亲爱的，你愿意嫁给我吗？</h2>
        </div>
        <div class="action-buttons">
          <button 
            class="proposal-btn yes-btn" 
            @click="acceptProposal"
            :class="{ 'accepted': isAccepted }"
          >
            💖 我愿意
          </button>
          <button 
            class="proposal-btn no-btn" 
            @mouseover="moveNoButton"
            ref="noButton"
          >
            😢 考虑一下
          </button>
        </div>
      </div>
      
      <!-- 庆祝效果 -->
      <div class="celebration" v-if="showCelebration">
        <div class="fireworks">
          <div v-for="i in 20" :key="i" class="firework" :style="getFireworkStyle(i)"></div>
        </div>
        <div class="confetti">
          <div v-for="i in 50" :key="i" class="confetti-piece" :style="getConfettiStyle(i)"></div>
        </div>
        <div class="celebration-text">
          <h1>🎉 恭喜！我们即将开始新的人生篇章！ 🎉</h1>
          <p>我爱你，永远爱你！</p>
        </div>
      </div>
    </div>
    
    <!-- 戒指详情模态框 -->
    <div v-if="showRingModal" class="ring-modal" @click="closeRingModal">
      <div class="modal-content" @click.stop>
        <div class="ring-detail">
          <div class="ring-preview">
            <div class="ring-large">💍</div>
            <div class="diamond-large">💎</div>
          </div>
          <div class="ring-info">
            <h3>💎 求婚戒指</h3>
            <p>这枚戒指代表了我对你永恒的爱</p>
            <ul class="ring-features">
              <li>✨ 精选钻石，象征我们的爱情纯净无瑕</li>
              <li>💕 精心设计，只为配得上最美的你</li>
              <li>🌟 永恒承诺，一生一世的约定</li>
            </ul>
          </div>
        </div>
        <button class="modal-close" @click="closeRingModal">×</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import Typed from 'typed.js'
import { gsap } from 'gsap'
import { initParticles } from '../utils/particles.js'
import { loveConfig, loveUtils } from '../config/love-config.js'

export default {
  name: 'Proposal',
  setup() {
    const proposalMessage = ref(null)
    const noButton = ref(null)
    const isRingSpinning = ref(false)
    const showRingModal = ref(false)
    const isAccepted = ref(false)
    const showCelebration = ref(false)
    
    let typed = null
    
    const futurePlans = loveConfig?.futurePlans || [
      {
        icon: '🏠',
        title: '温馨的家',
        description: '我们一起布置属于我们的小窝，创造温馨的家庭氛围'
      },
      {
        icon: '👶',
        title: '可爱的孩子',
        description: '期待我们的小天使降临，让我们的爱延续到下一代'
      },
      {
        icon: '🌍',
        title: '环游世界',
        description: '一起探索世界的美好，留下属于我们的足迹'
      },
      {
        icon: '👴👵',
        title: '白头偕老',
        description: '携手走过人生的每一个阶段，直到白发苍苍'
      },
      {
        icon: '🎭',
        title: '共同成长',
        description: '在人生的道路上互相扶持，一起成为更好的人'
      },
      {
        icon: '💝',
        title: '永恒爱情',
        description: '让我们的爱情如钻石般永恒闪耀，永不褪色'
      }
    ]
    
    const getFireworkStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 2 + 's',
        animationDuration: (Math.random() * 1 + 1) + 's'
      }
    }
    
    const getConfettiStyle = (index) => {
      const colors = ['#ff6b9d', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3']
      return {
        left: Math.random() * 100 + '%',
        backgroundColor: colors[Math.floor(Math.random() * colors.length)],
        animationDelay: Math.random() * 3 + 's',
        animationDuration: (Math.random() * 2 + 2) + 's'
      }
    }
    
    const showRing = () => {
      isRingSpinning.value = true
      setTimeout(() => {
        isRingSpinning.value = false
        showRingModal.value = true
      }, 1000)
    }
    
    const closeRingModal = () => {
      showRingModal.value = false
    }
    
    const moveNoButton = () => {
      const btn = noButton.value
      const x = Math.random() * (window.innerWidth - btn.offsetWidth)
      const y = Math.random() * (window.innerHeight - btn.offsetHeight)
      
      gsap.to(btn, {
        x: x,
        y: y,
        duration: 0.5,
        ease: 'power2.out'
      })
    }
    
    const acceptProposal = () => {
      isAccepted.value = true
      showCelebration.value = true
      
      gsap.to('.proposal-content', {
        scale: 1.05,
        duration: 0.5,
        yoyo: true,
        repeat: 1
      })
      
      // 播放庆祝音效（如果有的话）
      // new Audio('/sounds/celebration.mp3').play()
    }
    
    onMounted(() => {
      // 初始化粒子效果
      initParticles('particles-js-proposal')
      
      // 初始化打字效果
      typed = new Typed(proposalMessage.value, {
        strings: [
          '亲爱的，从遇见你的那一刻起，我就知道你是我的命中注定。经过这么长时间的相处，我更加确定，你就是我想要共度一生的人。',
          '我想和你一起走过人生的每一个阶段，分享每一个快乐和悲伤。我想和你一起创造属于我们的美好回忆。',
          '今天，我想正式地向你求婚。我想和你组建一个家庭，一起面对生活的挑战，一起享受生活的美好。',
          '你愿意嫁给我吗？让我用一生的时间来爱你，珍惜你，保护你。'
        ],
        typeSpeed: 30,
        backSpeed: 20,
        backDelay: 3000,
        loop: false,
        showCursor: true,
        cursorChar: '|'
      })
    })
    
    onUnmounted(() => {
      if (typed) typed.destroy()
    })
    
    return {
      proposalMessage,
      noButton,
      isRingSpinning,
      showRingModal,
      isAccepted,
      showCelebration,
      futurePlans,
      getFireworkStyle,
      getConfettiStyle,
      showRing,
      closeRingModal,
      moveNoButton,
      acceptProposal,
      loveConfig,
      loveUtils
    }
  }
}
</script>

<style scoped>
.proposal-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  padding: 2rem;
}

.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 100;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-5px);
}

.proposal-content {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 4rem;
  position: relative;
  z-index: 10;
}

.proposal-content.accepted .proposal-text,
.proposal-content.accepted .future-plans,
.proposal-content.accepted .proposal-actions {
  display: none;
}

.proposal-header {
  text-align: center;
  margin-bottom: 4rem;
}

.proposal-title {
  font-size: 3.5rem;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.proposal-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
}

/* 戒指展示 */
.ring-section {
  text-align: center;
  margin-bottom: 4rem;
}

.ring-container {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 1rem;
}

.ring {
  position: relative;
  font-size: 8rem;
  transition: all 0.3s ease;
}

.ring-spin {
  animation: spin 1s ease-in-out;
}

@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

.diamond {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.2); }
}

.ring-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.ring-text {
  color: white;
  font-size: 1.1rem;
  opacity: 0.8;
}

/* 求婚文字 */
.proposal-text {
  margin-bottom: 4rem;
}

.proposal-message {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: justify;
  min-height: 200px;
  font-family: 'LoveFont', cursive;
}

/* 未来规划 */
.future-plans {
  margin-bottom: 4rem;
}

.plans-title {
  text-align: center;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.plan-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.15);
}

.plan-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.plan-title {
  font-size: 1.3rem;
  color: white;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.plan-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  font-family: 'LoveFont', cursive;
}

/* 求婚按钮 */
.proposal-actions {
  text-align: center;
  margin-bottom: 2rem;
}

.proposal-question {
  margin-bottom: 2rem;
}

.question-text {
  font-size: 2rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.proposal-btn {
  padding: 1.5rem 3rem;
  font-size: 1.3rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: 'LoveFont', cursive;
}

.yes-btn {
  background: linear-gradient(45deg, #ff6b9d, #c44569);
  color: white;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
}

.yes-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(255, 107, 157, 0.6);
}

.yes-btn.accepted {
  animation: celebrate 0.5s ease-in-out;
}

.no-btn {
  background: linear-gradient(45deg, #95a5a6, #7f8c8d);
  color: white;
  box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4);
}

.no-btn:hover {
  transform: scale(1.05);
}

@keyframes celebrate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* 庆祝效果 */
.celebration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

.fireworks {
  position: absolute;
  width: 100%;
  height: 100%;
}

.firework {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff6b9d, #4ecdc4, #45b7d1);
  border-radius: 50%;
  animation: firework 3s ease-out infinite;
}

@keyframes firework {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
}

.confetti {
  position: absolute;
  width: 100%;
  height: 100%;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti 4s linear infinite;
}

@keyframes confetti {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.celebration-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 51;
  pointer-events: none;
}

.celebration-text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: 'LoveFont', cursive;
}

.celebration-text p {
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-family: 'LoveFont', cursive;
}

/* 戒指模态框 */
.ring-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  max-width: 600px;
  width: 90%;
  position: relative;
}

.ring-detail {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.ring-preview {
  flex-shrink: 0;
  position: relative;
}

.ring-large {
  font-size: 6rem;
}

.diamond-large {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  animation: sparkle 2s ease-in-out infinite;
}

.ring-info {
  flex: 1;
}

.ring-info h3 {
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.ring-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.ring-features {
  list-style: none;
  padding: 0;
}

.ring-features li {
  color: #555;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.ring-features li::before {
  content: '✨';
  position: absolute;
  left: 0;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
}

.modal-close:hover {
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .proposal-page {
    padding: 1rem;
  }
  
  .proposal-title {
    font-size: 2.5rem;
  }
  
  .ring {
    font-size: 6rem;
  }
  
  .plans-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .proposal-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .ring-detail {
    flex-direction: column;
    text-align: center;
  }
  
  .celebration-text h1 {
    font-size: 1.8rem;
  }
  
  .celebration-text p {
    font-size: 1.2rem;
  }
}
</style>
